<template>
  <div class="movie_body">
    <mt-index-list> 
      <mt-index-section :index="value.index" v-for="value in finalyarr" :key="value.index">
        <mt-cell :title="city.nm" v-for="city in value.list" :key="city.id" @click.native="switchcity(city.nm,city.id)"></mt-cell>
      </mt-index-section>
    </mt-index-list> 
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import { Indicator } from 'mint-ui';
export default {
  data() {
    return {
      // 请求到的城市数据
      cityarr:'',
      // 改造后的城市数据（要在页面中使用）
      finalyarr:[],
    };
  },
  methods: {
    //一进来先判断有没有本地存储取本地存储,有就赋值,没就发请求
    judge(){
      var arr = window.localStorage.getItem('finalyarray')
      if(arr){
        this.finalyarr=JSON.parse(arr)
      }else{
        Indicator.open();
        this.getCity()
      }
    },
    // 向接口发请求获取城市数据
    async getCity(){
      const res =await this.$axios.get('http://192.168.43.145:3000/city')
      if(res.status==200){    
         this.cityarr = res.data.cities//城市数组
         this.city()
         Indicator.close();
      }else{
        Toast('请求失败')
      }
    },
    //形成最终组件要用的数组,并存入本地存储
    city(){
      for(var i=65;i<91;i++){       
        //从城市数组里挑选出城市元素组成新的数组，就要由城市数组调用这个方法
        //filter本身就包含遍历的意思
        var indexarr =this.cityarr.filter(item=>item.py.charAt(0)===String.fromCharCode(i).toLowerCase())
        //如果这个字母连一个城市都没有，也就没必要显示了
        if(indexarr.length>0){
            this.finalyarr.push({index:String.fromCharCode(i).toLowerCase(),list:indexarr})
        }
        //把城市列表放到本地存储里,下次不需要重新请求
        window.localStorage.setItem('finalyarray',JSON.stringify(this.finalyarr))
      }
    },
    // 切换城市时,不仅要把当前选择城市放到本地存储里,还要手动变更state里的值页面才能更新
    switchcity(name,id){
      window.localStorage.setItem('cityname',name)
      window.localStorage.setItem('cityid',id)
      this.$store.commit('city/switchcity',{name,id})
      this.$router.push('/movie/nowplaying')
    },
  },
  created() {
    
  },
  activated() {
    window.sessionStorage.setItem('lastpath','/movie/city')
    // 判断有没有本地存储
    this.judge()
    
  },
};
</script>

<style  scoped>
.movie_body{
    overflow: hidden;
}
.mint-indexlist-content{
  height: 100%!important;
}
.mint-indexlist-nav{
  justify-content: flex-start!important;
}
.mint-indexlist {
    height: 100%;
}
</style>
